import React, { Component } from 'react';
import { TableMethods } from '@/common/Hoc/data';
import { Card, Form, Input, Popover } from 'antd';
import StandardTable from '@/pages/base/SysLog/StandardTable';
import { SimpleCurd } from '@/common/Hoc/SimpleCurdHoc';
import { selectPage } from '@/services/syslog';
import styles from '@/common/styles/table.less';
import classnames from 'classnames';

const baseMethods: TableMethods = {
  getList: (param: any) => selectPage(param),
};

@SimpleCurd(baseMethods)
// @ts-ignore
@Form.create()
export default class CurdTable extends Component<any, any> {
  columns: any[] = [
    {
      title: '操作用户',
      dataIndex: 'username',
    },
    {
      title: 'ip地址',
      dataIndex: 'ip',
    },
    {
      title: '操作内容',
      dataIndex: 'content',
    },
    {
      title: '操作类型',
      dataIndex: 'type',
      filters: [
        {
          text: '添加',
          value: 1,
        },
        {
          text: '修改',
          value: 3,
        },
        {
          text: '删除',
          value: 2,
        },
        {
          text: '导入',
          value: 4,
        },
        {
          text: '导出',
          value: 5,
        },
      ],
    },
    {
      title: '参数',
      dataIndex: 'params',
      render: (val: string) => (
        <span>
          {val.length > 30 ? (
            <Popover placement="top" content={val} arrowPointAtCenter>
              {val.substring(0, 30) + '...'}
            </Popover>
          ) : (
            val
          )}
        </span>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createdTime',
      sorter: true,
      sortDirections: ['descend', 'ascend'],
    },
  ];
  searchColumns = [
    {
      title: '用户名',
      name: 'username',
      content: <Input placeholder="请输入用户名" />,
    },
  ];

  render() {
    const { tableChange, tableData, tableLoading, pageTotal } = this.props;
    return (
      <div className="s_r_table_wrapper">
        <Card bordered={false}>
          <div className={classnames(styles.tableList)}>
            <div className={styles.tableListForm}>
              {this.props.renderForm(this.props.form, this.searchColumns)}
            </div>
            <div className={styles.tableListOperator}></div>
            <StandardTable
              columns={this.columns}
              tableChange={tableChange}
              tableData={tableData}
              pageTotal={pageTotal}
              loading={tableLoading}
            />
          </div>
        </Card>
      </div>
    );
  }
}
